<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>添加自定义角色</title>
		<!-- Bootstrap -->
		<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
		<link href="fonts/iconfont.css" rel="stylesheet">
		<link href="../assets/css/style.css" rel="stylesheet" />
		<link href="../assets/css/motai.css" rel="stylesheet" />
		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
		      <script src="../assets/js/html5shiv.min.js"></script>
		      <script src="../assets/js/respond.min.js"></script>
		      <![endif]-->
		<style type="text/css">
		  .mendianno{
		    font-size: 18px;
		    margin-right: 8px;
		    color: #666;
		    line-height: 22px;
		  }
		  .mendianquanno{
		    font-size: 18px;
        margin-right: 8px;
        color: #666;
        line-height: 22px;
		  }
		  .mendianyes{
		    color: #E66B18;
		  }
		  .myModal2-guanli{
		    font-size: 18px;
		  }
		</style>
	</head>

	<body>

		<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">添加+</button>

		<!-- 模态框（Modal） -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<div class="zuo-close" data-dismiss="modal">
							<i class="iconfont icon-o1"></i>
						</div>
						<h5 class="modal-title" id="myModalLabel"><i class="iconfont icon-jiahao"></i>&nbsp;添加自定义角色</h5>
					</div>

					<div class="modal-body">
						<div class="row">
							<form class="form-horizontal" role="form">

								<div class="form-group">
									<label for="lastname" class="col-sm-3 control-label"><span class="bitian">*</span>所属商家</label>
									<div class="col-sm-8">
										<select id="usertype" name="usertype" class="selectpicker show-tick form-control" data-live-search="true">
											<option value="0">苹果</option>
											<option value="1">菠萝</option>
											<option value="2">香蕉</option>
											<option value="3">火龙果</option>
											<option value="4">梨子</option>
											<option value="5">草莓</option>
											<option value="6">哈密瓜</option>
											<option value="7">椰子</option>
											<option value="8">猕猴桃</option>
											<option value="9">桃子</option>
										</select>
									</div>
								</div>

								<div class="form-group">
									<label for="firstname" class="col-sm-3 control-label"><span class="bitian">*</span>角色名称</label>
									<div class="col-sm-8">
										<input type="text" class="form-control" id="firstname" placeholder="请输入角色名称">
									</div>
								</div>

								<div class="form-group">
									<label for="lastname" class="col-sm-3 control-label"><span class="bitian">*</span>角色级别</label>
									<div class="col-sm-8">
										<select id="usertype" name="usertype" class="selectpicker show-tick form-control" data-live-search="true">
											<option value="0">0</option>
											<option value="1">1</option>
											<option value="2">2</option>
											<option value="3">3</option>
											<option value="4">4</option>
											<option value="5">5</option>
											<option value="6">6</option>
											<option value="7">7</option>
											<option value="8">8</option>
											<option value="9">9</option>
										</select>
									</div>
								</div>

								<div class="form-group">
									<label for="firstname" class="col-sm-3 control-label"><span class="bitian">*</span>图&emsp;&emsp;片</label>
									<div class="col-sm-8">

										<div class="file_img_button margin3 colorE66" data-toggle="modal" data-target="#myModal2" data-dismiss="modal">
											管理栏目
										</div>

									</div>
								</div>

							</form>
						</div>
					</div>

					<div class="modal-footer shangjiaguanli_foot">
						<button type="button" class="btn save" data-dismiss="modal">保存</button>
						<button type="button" class="btn  close_motai" data-dismiss="modal">关闭</button>
					</div>

				</div>
			</div>

		</div>
		<!-- 第二个模态框 -->
		<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content height450">

					<div class="modal-header">
						<div class="zuo-close" data-dismiss="modal">
							<i class="iconfont icon-o1"></i>
						</div>
						<h5 class="modal-title" id="myModalLabel"><i class="iconfont icon-wujiaoxings"></i>&emsp;管理栏目</h5>
					</div>
					<div class="modal-body height350">
						<div class="row ">
						  <div class="guanli-item">
						    <div class="col-sm-12 margin1-top-10">
                  <div class="row">
                    <div class="col-sm-12"><i class="iconfont icon-yuanxingweixuanzhong mendianquanno"></i>首页&emsp;&emsp;</div>
                  </div>
                </div>
                <div class="mendian-mendian">
                  <div class="col-sm-3 col-xs-6 myModal2-guanli"><i class="iconfont icon-yuanxingweixuanzhong mendianno"></i>门店管理</div>
                  <div class="col-sm-3 col-xs-6 myModal2-guanli"><i class="iconfont icon-yuanxingweixuanzhong mendianno"></i>门店管理</div>
                  <div class="col-sm-3 col-xs-6 myModal2-guanli"><i class="iconfont icon-yuanxingweixuanzhong mendianno"></i>门店管理</div>
                  <div class="col-sm-3 col-xs-6 myModal2-guanli"><i class="iconfont icon-yuanxingweixuanzhong mendianno"></i>门店管理</div>
                  <div class="col-sm-3 col-xs-6 myModal2-guanli"><i class="iconfont icon-yuanxingweixuanzhong mendianno"></i>门店管理</div>
                  <div class="col-sm-3 col-xs-6 myModal2-guanli"><i class="iconfont icon-yuanxingweixuanzhong mendianno"></i>门店管理</div>
                  <div class="col-sm-3 col-xs-6 myModal2-guanli"><i class="iconfont icon-yuanxingweixuanzhong mendianno"></i>门店管理</div>
                  <div class="col-sm-3 col-xs-6 myModal2-guanli"><i class="iconfont icon-yuanxingweixuanzhong mendianno"></i>门店管理</div>
                  <div class="col-sm-3 col-xs-6 myModal2-guanli"><i class="iconfont icon-yuanxingweixuanzhong mendianno"></i>门店管理</div>
                </div>
						  </div>
							<div class="guanli-item">
                <div class="col-sm-12 margin1-top-10">
                  <div class="row">
                    <div class="col-sm-12"><i class="iconfont icon-yuanxingweixuanzhong mendianquanno"></i>首页&emsp;&emsp;</div>
                  </div>
                </div>
                <div class="mendian-mendian">
                  <div class="col-sm-3 col-xs-6 myModal2-guanli"><i class="iconfont icon-yuanxingweixuanzhong mendianno"></i>门店管理</div>
                  <div class="col-sm-3 col-xs-6 myModal2-guanli"><i class="iconfont icon-yuanxingweixuanzhong mendianno"></i>门店管理</div>
                  <div class="col-sm-3 col-xs-6 myModal2-guanli"><i class="iconfont icon-yuanxingweixuanzhong mendianno"></i>门店管理</div>
                  <div class="col-sm-3 col-xs-6 myModal2-guanli"><i class="iconfont icon-yuanxingweixuanzhong mendianno"></i>门店管理</div>
                  <div class="col-sm-3 col-xs-6 myModal2-guanli"><i class="iconfont icon-yuanxingweixuanzhong mendianno"></i>门店管理</div>
                  <div class="col-sm-3 col-xs-6 myModal2-guanli"><i class="iconfont icon-yuanxingweixuanzhong mendianno"></i>门店管理</div>
                  <div class="col-sm-3 col-xs-6 myModal2-guanli"><i class="iconfont icon-yuanxingweixuanzhong mendianno"></i>门店管理</div>
                  <div class="col-sm-3 col-xs-6 myModal2-guanli"><i class="iconfont icon-yuanxingweixuanzhong mendianno"></i>门店管理</div>
                  <div class="col-sm-3 col-xs-6 myModal2-guanli"><i class="iconfont icon-yuanxingweixuanzhong mendianno"></i>门店管理</div>
                </div>
              </div>
						</div>
					</div>

					<div class="modal-footer">
						<div class="myModal2_foot">
							<!-- <button type="button" class="btn  close_motai" ata-dismiss="modal" data-toggle="modal" data-target="#myModal">保存</button> -->
							<button type="button" class="btn  close_motai colo_bg" data-dismiss="modal" data-toggle="modal" data-target="#myModal">保存</button>
							<button type="button" class="btn  close_motai" data-dismiss="modal" data-toggle="modal" data-target="#myModal">关闭</button>
						</div>
					</div>

				</div>
			</div>
		</div>
		<script src="../assets/js/jquery.min.js"></script>
		<script src="../assets/js/bootstrap.min.js"></script>
		<script src="../assets/js/main.js"></script>
		<script type="text/javascript">
		  $('.mendianno').on('click',function(){
		    if($(this).hasClass('mendianyes')){
		      $(this).removeClass('mendianyes')
		    }else{
		      $(this).addClass('mendianyes')
		    }
		  })
		  $('.mendianquanno').on('click',function(){
		    if($(this).hasClass('mendianyes')){
          $(this).removeClass('mendianyes')
          $(this).parent().parent().parent().siblings().children().children('.mendianno').removeClass('mendianyes');
        }else{
          $(this).addClass('mendianyes')
          $(this).parent().parent().parent().siblings().children().children('.mendianno').addClass('mendianyes');
        }
		  })
		</script>

	</body>

</html>